<template>
  <div class="physical-room-listing">
    <ItemDetail :loading="tableLoading" :show.sync="showModal" :value="item" :title="`${action} Item`" :id="itemID" @submit="confirmSubmit" :action="action" ></ItemDetail>
    <div class="row">
      <div class="col-md-12 p-0">
        <filter-form v-if="filters.length" :columns="filters" @submit="_submit">
          <template slot="filter-form-slot" slot-scope="props">|
            <el-radio-group v-model="readFlag" size="mini" @change="radioChange">
            <el-radio-button label="UnRead"></el-radio-button>
            <el-radio-button label="Readed"></el-radio-button>
          </el-radio-group>
          </template>
        </filter-form>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12 bg-white p-0 m-0">
        <item-table title="Physical Room Listing List" :columns="defaultColumns" :data="data" :loading="tableLoading" @sort="sort"
                    :total="total" :model="model" isColumns  :isExport="false" @export="exportExcel" :isReadFlag="true"
        >
          <template slot="status" slot-scope="props">
            <el-tag type="warning" effect="dark" class="el-tag-cls" v-if="props.item.status == 0">Pending</el-tag>
            <el-tag type="success"  effect="dark" class="el-tag-cls" v-if="props.item.status == 1">Success</el-tag>
            <el-tag type="info"  effect="dark" class="el-tag-cls" v-if="props.item.status == 2">Submitted</el-tag>
            <el-tag type="danger"  effect="dark" class="el-tag-cls" v-if="props.item.status == 9">Failed</el-tag>
          </template>

          <template slot="is_hidden" slot-scope="props">
            <el-tag type="success"  effect="dark" class="el-tag-cls" v-if="!props.item.is_hidden">Un Read</el-tag>
            <button type="button" class="btn btn-info btn-outline btn-circle btn-md m-r-5" @click="doReaded(props)"  v-if="!props.item.is_hidden" title="点击设为已读">
              <i class="el-icon-check"></i>
            </button>
            <el-tag type="danger"  effect="dark" class="el-tag-cls" v-if="props.item.is_hidden">Readed</el-tag>
          </template>

        </item-table>
        <v-paginate :pageCount="pageCount" :page="page" @change="changePage"></v-paginate>
      </div>
    </div>
  </div>
</template>

<script>
  // components
  import vSelect from 'vue-select'
  import vPaginate from '@/components/widgets/Pagination'
  import ItemTable from '@/components/widgets/ItemTable'
  import ItemDetail from '@/components/widgets/ItemDetail'
  import FilterForm from '@/components/widgets/FilterForm'
  // mixin
  import {lifeHookMixin, itemMixin} from '@/mixins/item'
  import {addModel,searchModel,get,updateModel} from "@/api/model";
  export default {
    name: "FunkeyWorkerTaskList",
    components: {vSelect, vPaginate, ItemTable, ItemDetail, FilterForm},
    mixins: [lifeHookMixin, itemMixin],
    data(){
      return {
        readFlag: 'UnRead'
      };
    },
    created() {
      // model
      this.model = 'FunkeyWorkerTask';
    },
    mounted(){
      this.loadDatas();
    },
    watch:{
      "$route": "loadDatas"
    },
    methods: {
      loadDatas(){
        this.readFlag = 'UnRead';
        this._submit();
      },
      radioChange(){
        this._submit();
      },
      _submit(conditions, flag, extendedFilter){
        const pars = this.$route.query;
        if(!pars) return;
        const {actionType} = pars;
        if(!conditions || !conditions.filters){
          conditions = {
            filters : []
          };
        }
        const readed = (this.readFlag == 'UnRead') ? false : true;
        conditions.filters.push({column: "is_hidden", value: readed});
        if(actionType == 5){ // 查当前用户
          const currUser = this.$store.state.user;
          const operatorCondition = {column: "operator", value: currUser};
          let isAdd = false;
          if(!conditions.filters || conditions.filters.length == 0){
            isAdd = true;
          }else{
            const operatorIndex = conditions.filters.findIndex((v) => {
              return (v.column == "operator" && v.value);
            });
            if(operatorIndex == -1){
              isAdd = true;
            }
          }
          if(isAdd){
            if(!conditions.filters) return;
            conditions.filters.push(operatorCondition);
          }
        }
        this.orderBy = "-id";
        this.submit(conditions,flag,extendedFilter);
      },
      doReaded(props){
        const id = props.item.id;
        this.tableLoading = true;
        updateModel(this.model,id,{id:id,is_hidden:true}).then(res => {
          this.tableLoading = false;
          this.$message({
            type: 'info',
            message: 'Save Data Success!'
          });
          this._submit();
        }).catch(reason => {
          this.tableLoading = false;
          this.$message.error('Please Check Input Form Data Has Errors!');
        });
      }
    }
  }
</script>

<style scoped>

</style>
